;(function(){

    class Banner{
        constructor(){
            this.btnl = $("#banner_img_l");
            this.btnr = $("#banner_img_r");
            this.bannerBox = document.getElementById("bannerImg");          //轮播图图片盒子
            this.bannerBtnL = document.getElementById("bannerBtnl");        //轮播图左按钮
            this.bannerBtnR = document.getElementById("bannerBtnr");        //轮播图右按钮
            this.bannerImgDump = document.getElementById("bannerImgDump");  //轮播图下点点
            this.bigBox = document.querySelector('.banner_img');
            this.index = 0;
        }
        // ajax获取轮播图数据
        getdata(){
            var that = this ; 
            var p1 = pAjax({
                type:"post",
                url:"http://localhost/XMYP/src/php/banner.php",
            });
            p1.then(function(res){
                that.data = JSON.parse(res);
                that.addElement();
            })
        }
        // 根据数据生成图片
        addElement(){
            var imgstr = '';
            var liststr = '';
            for(var i = 0 ; i < this.data.length ; i++){
                imgstr += `<img src="${this.data[i].address}" alt="" index = ${i}>`
                liststr += `<i index=${i}></i>`;
            }
            this.bannerBox.innerHTML = imgstr;
            this.bannerImgDump.innerHTML = liststr;
            this.init();
        }
        // 初始化轮播图
        init(){
            this.bannerBox.children[0].style.left = 0;
            this.bannerImgDump.children[0].className = "banner_dump_active";
            this.addEvent();
            this.autoplay();
        }
        // 添加点击事件
        addEvent(){
            var that = this ;
            this.bannerBtnL.onclick = function(){
                that.move(1);
            }
            this.bannerBtnR.onclick = function(){
                that.move(2);
            }
            this.bannerImgDump.onclick = function(eve){
                var e = eve || window.event;
                var tag = e.targer || e.srcElement;
                if(tag.tagName == "I"){
                    that.dump(tag);                
                }
            }
        }
        move(i){
            if(i==1){
                if(this.index == 0 ){
                    this.index = this.data.length-1;
                    go(this.bannerBox.children[0],"left",859);
                    this.bannerBox.children[this.data.length-1].style.left = -859 + "px";
                    go(this.bannerBox.children[this.data.length-1],"left",0);
                }else{
                    this.index -= 1 ;
                    go(this.bannerBox.children[this.index+1],"left",859);
                    this.bannerBox.children[this.index].style.left = -859 + 'px';
                    go(this.bannerBox.children[this.index],"left",0);
                }
            }
            if(i==2){
                if(this.index == this.data.length-1){
                    this.index = 0;
                    go(this.bannerBox.children[this.data.length-1],"left",-859);
                    this.bannerBox.children[0].style.left = 859 + 'px';
                    go(this.bannerBox.children[0],"left",0);
                }else{
                    this.index += 1 ;
                    go(this.bannerBox.children[this.index-1],"left",-859);
                    this.bannerBox.children[this.index].style.left = 859 + "px";
                    go(this.bannerBox.children[this.index],"left",0);
                }
            }
            this.dumpActive(this.index);
        }
        dump(tag){
            var i = parseInt(tag.getAttribute("index"));

           

            if(this.index > i){
                go(this.bannerBox.children[this.index],"left",859);
                this.bannerBox.children[i].style.left = -859 +"px";
                go(this.bannerBox.children[i],"left",0);
                this.index = i ;
                // this.bannerImgDump.children[i].className = 'banner_dump_active';
            }            
            if(this.index<i){
                go(this.bannerBox.children[this.index],"left",-859);
                this.bannerBox.children[i].style.left = 859 +"px";
                go(this.bannerBox.children[i],"left",0);
                this.index = i ;
                // this.bannerImgDump.children[i].className = 'banner_dump_active';
            }
            this.dumpActive(i);
        }
        dumpActive(i){
            for(var o = 0 ; o < this.bannerImgDump.children.length ; o ++){
                this.bannerImgDump.children[o].className = '';
            }
            this.bannerImgDump.children[i].className = 'banner_dump_active';
        }
        autoplay(){
            var t  = setInterval(()=>{
                this.bannerBtnR.click();
            },2500);
            
            this.bigBox.onmouseover = (()=>{
                clearInterval(t);
            });

            this.bigBox.onmouseout = (()=>{
                t = setInterval (()=>{
                    this.bannerBtnR.click();
                },2500)
            })

        }
        
    }

    let banner = new Banner();
    banner.getdata();

    
    

}());